<template>
  <view class="wh_750 pageHeight bg_F5F5F5 pageHeight flex flex-column align-center">
    <s-header-title title="移动位置" is-fixed is-display-back background="#FFFFFF"
                    @getPageHeight="getPageHeight"
    >
      <template #default>
        <view class="fs_24 color_FFFFFF bg_FF4206"
              style="position: absolute;right: 20rpx;border-radius: 32rpx;padding: 10rpx 24rpx"
              @click.stop="movePosition"
        >
          完成
        </view>
      </template>
    </s-header-title>
    <view :style="{height:`${state.pageHeight}px`}"></view>
    <view class="flex-sub flex align-center flex-column" style="width: 100%">
      <view class="bg_FFFFFF flex flex-column align-center" style="width: 100%;">
        <view class="inputName flex align-center justify-between" style="padding: 20rpx 0">
          <input v-model="state.requestParameter.search" placeholder="请输入家谱成员姓名"
                 placeholder-class="inputName_placeholder"
                 confirm-type="search"
                 :focus="state.familyNameFocus"
                 @confirm="confirm"
          >
          </input>
          <view class="fs_28 color_FF4206 fw_500"
                style="white-space: nowrap"
                @click.stop="confirm"
          >
            搜索
          </view>
        </view>
        <view class="fs_24 wh_702 fw_500 color_FF4206" style="padding: 0 0 20rpx 0">
          请选择移动至此人下方
        </view>
      </view>
      <view class="flex-sub" style="width: 100%;position: relative">
        <scroll-view :scroll-y="true"
                     style="position: absolute;top: 0;left:0;width: 100%;height: 100%;"
                     :lower-threshold="200"
                     @scrolltolower="getMore"
        >
          <view class="flex align-center bg_FFFFFF"
                v-for="(item,index) in state.list"
                :key="index"
                style="padding: 10rpx 0"
                hover-class="bg-click"
                @click.stop="selectList(index)"
          >
            <view class="wh_20 hW_20 ml_20 mr_20" style="border-radius: 50%;border: 15rpx solid #4B4B4B;"
                  :style="{
                    border:state.selectIndex == index ? '4rpx solid #FF4206' : '4rpx solid #4A4A4A'
                  }"
            >
            </view>
            <view class="flex align-center">
              <view class="flex align-center justify-center"
                    style="border-radius: 12rpx;overflow: hidden"
              >
                <image class="wh_120 hW_120"
                       :src="item.avatar.indexOf('http') != -1 ? item.avatar : `${nc_image}${item.avatar}`"
                ></image>
              </view>
              <view class="fs_32 fw_500 color_4B4B4B ml_15">{{ item.surname }}{{ item.name }}</view>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>
  </view>
</template>

<script setup>
  import { reactive, computed } from 'vue';
  import SHeaderTitle from '@/sheep/components/s-header-title/s-header-title.vue';
  import { onLoad } from '@dcloudio/uni-app';
  import sheep from '@/sheep';

  const state = reactive({
    pageHeight: 0,
    options: {},
    list: [],
    requestParameter: {
      page: 1,
      limit: 20,
      search: '',
      total: 0,
    },
    familyNameFocus: false,
    // 当前选择的成员信息
    selectFamilyMember: {},
    selectIndex: -1,
  });
  const nc_image = computed(() => sheep.$store('AI').nc_image);

  onLoad(async (options) => {
    state.options = options;
    await getList();
  });

  const getPageHeight = (height) => {
    state.pageHeight = height;
  };

  // 搜索
  const confirm = () => {
    state.requestParameter.page = 1;
    state.list = [];
    getList();
  };

  // 选择成员
  const selectList = (index) => {
    state.selectFamilyMember = state.list[index];
    state.selectIndex = index;
  };

  // 获取列表
  const getList = async () => {
    let { data } = await sheep.$api.genealogy.getOtherSpouse({
      genealogy_id: state.options.genealogy_id,
      relation_id: state.options.relation_id,
      page: state.requestParameter.page,
      limit: state.requestParameter.limit,
      search: state.requestParameter.search,
    });
    data.list.data.forEach(item => {
      state.list.push(item);
    });
    state.requestParameter.total = data.count;
  };

  // 获取更多
  const getMore = async () => {
    console.log('getMore', state.requestParameter.page * state.requestParameter.limit);
    if (state.requestParameter.page * state.requestParameter.limit < state.requestParameter.total) {
      state.requestParameter.page++;
      await getList();
    }
  };

  const movePosition = async () => {
    if (!state.selectFamilyMember && JSON.stringify(state.selectFamilyMember) == '{}') {
      sheep.$helper.toast('未选择家谱成员');
      return;
    }
    const { code, msg } = await sheep.$api.genealogy.changeFather({
      genealogy_id: state.options.genealogy_id,
      member_id: state.options.relation_id,
      new_father_id: state.selectFamilyMember.id,
    })
    if (code == 1) {
      await sheep.$store('family').setGenealogyTreeStatus(true);
      setTimeout(()=>{
        uni.navigateBack();
      },1500)
    }else{
      sheep.$helper.toast(msg);
    }
  };
</script>


<style scoped lang="scss">
  .inputName {
    width: 702rpx;
    height: 80rpx;

    input {
      width: 620rpx;
      height: 80rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 28rpx;
      color: #4B4B4B;
      text-align: center;
      background: #F5F5F5;
      border-radius: 40rpx 40rpx 40rpx 40rpx;
    }
  }

  .inputName_placeholder {
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 28rpx;
    color: #9F9F9F;
    text-align: center;
  }

  .bg-click {
    background: red;
  }
</style>
